<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    p {
      height: 30px;
      line-height: 30px;
      margin-top: 5px;
    }

    p label {
      float: left;
      height: 30px;
      width: 100px;
      text-align: right;
      background: yellow;
    }

    p input {
      float: left;
      height: 30px;
      line-height: 30px;
      border: 0;
      padding-left: 10px;
      background: #ccc;
    }
  </style>
</head>

<body>

  <p>
    <label for="uname">用户名：</label><input type="text" id="uname" placeholder="请输入用户名">
  </p>
  <p>
    <label for="petName">昵称：</label><input type="text" id="petName" placeholder="请输入昵称">
  </p>
  <p>
    <label for="email">邮箱：</label><input type="text" id="email" placeholder="请输入邮箱">
  </p>
  <p>
    <label for="ids">身份证：</label><input type="text" id="ids" placeholder="请输入身份证">
  </p>
  <p>
    <label for="tel">手机号：</label><input type="text" id="tel" placeholder="请输入手机号码">
  </p>
  <p>
    <label for="birthday">生日：</label><input type="text" id="birthday" placeholder="请输入生日">
  </p>
  <p>
    <label for="pwd">密码：</label><input type="text" id="pwd" placeholder="请输入密码">
  </p>
  <p>
    <label for="pwdSure">确定密码：</label><input type="text" id="pwdSure" placeholder="请输入密码">
  </p>
  <script>
    // 表单的验证
    // 【1】验证账号
    // - 用户名不能为空
    // - 不能使用特殊字符（只能使用数字、字母、下划线、横杠）
    // - 必须以字母开头
    // - 长度6-20
    // - 【2】昵称只能输入3-6个中文  /[\u4e00-\u9fa5]{3,6}/ 
    // - 【3】电子邮件
    //   + 163邮箱：
    //   + 英文开头,@前面的内容可以包含数字字母下划线、-(可以多位)
    //   + @后面的域名只能是163
    //   + 域名后缀（.com .cn .net）可以有多个。
    //   【4】身份证 18位数 后面以为可能是 X x
    // - 【5】手机号码
    // - 11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字就可以了
    // - 【6】生日验证
    //   + 1999/05/08
    //   + 1999-05-08
    //   + 19990508
    // - 【7】密码  
    //   + 长度小于20 
    //   + 不能包含空格 密码不一致能不能提交
    let uname = document.querySelector("#uname") //用户名
    let petName = document.querySelector("#petName") //昵称
    let email = document.querySelector("#email") //邮箱
    let ids = document.querySelector("#ids") //身份证
    let tel = document.querySelector("#tel") //手机号码
    let birthday = document.querySelector("#birthday") //生日
    let pwd = document.querySelector("#pwd") //密码
    let pwdSure = document.querySelector("#pwdSure") //确认密码

    //用户名失去焦点验证
    uname.onblur = function () {
      // 用户名不能为空  01:不能使用特殊字符（只能使用数字、字母、下划线、横杠） 02:必须以字母开头 03: 长度6-20
      let unameVal = uname.value;
      // console.log(unameVal.length);//输入的长度
      if (unameVal === "") {
        alert("请输入用户名")
      } else {
        let reg = /^[a-zA-Z][0-9a-zA-Z_-]{5,19}$/
        // console.log(reg.test(unameVal));
        if (reg.test(unameVal)) {
          alert("符合")
        } else {
          alert("不符合")
        }
      }
    }

    //昵称失去焦点的时候验证
    petName.onblur = function () {
      // 【2】昵称只能输入3-6个中文  /[\u4e00-\u9fa5]{3,6}/
      let petNameVal = petName.value;
      let reg = /[\u4e00-\u9fa5]{3,6}/
      if (reg.test(petNameVal)) {
        alert("输入的昵称符合")
      } else {
        alert("请输入3-6个中文")
        petName.value = ""
      }
    }

    //邮箱失去焦点的时候验证
    email.onblur = function () {
      // 【3】电子邮件 01:163邮箱 02:英文开头,@前面的内容可以包含数字字母下划线、-(可以多位)
      // 03:@后面的域名只能是163  04:域名后缀（.com .cn .net）可以有多个。
      let emailVal = email.value;
      // console.log(emailVal);

      let reg = /^[a-zA-Z][0-9a-zA-Z-_]{1,}@163\.(com|cn|net)$/
      if (reg.test(emailVal)) {
        alert("符合")
      } else {
        alert("不符合")
      }
    }

    //身份证失去焦点的时候验证
    ids.onblur = function () {
      //身份证 18位数 后面以为可能是 X x
      let idsVal = ids.value;
      let reg = /[0-9]{17}(X|x|[0-9])/
      if (reg.test(idsVal)) {
        alert("身份证符合要求")
        ids.value = ""
      } else {
        alert("身份证不符合要求")
      }
    }

    //手机号码失去焦点时候验证
    tel.onblur = function () {
      // 【5】手机号码 11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字就可以了
      let telVal = tel.value;
      let reg = /^1[345678][0-9]{8,9}$/
      if (reg.test(telVal)) {
        alert("手机号码符合")
      } else {
        alert("请输入合规的手机号码")
        tel.value = ""
      }
    }

    //生日失去焦点是验证
    birthday.onblur = function () {
      // 【6】生日验证 01:1999/05/08 02:1999-05-08 03:19990508
      let birthdayVal = birthday.value;
      // [/|-]{0,1} --- / - 空 等
      //月份 01-12 01-09 10-12  (0[1-9]|1[0-2])
      //日期：01-31 01-09 10-29 30-31   --- ([0-2][0-9]|3[0-1])
      let reg = /^1[0-9]{3}[\/|-]{0,1}(0[1-9]|1[0-2])[\/|-]{0,1}([0-2][0-9]|3[0-1])/
      if (reg.test(birthdayVal)) {
        alert(birthdayVal + "符合")
      } else {
        alert(birthdayVal + "不符合")
      }
    }

    //【7】密码   01: 长度小于20   02:不能包含空格 密码不一致能不能提交
    pwd.onblur = function () {
      let pwdVal = pwd.value;
      let reg = /^\S{1,20}$/
      console.log(reg.test(pwdVal));
      if (reg.test(pwdVal)) {
        alert("符合")
      } else {
        alert("不符合")
      }
    }

    //确认密码
    pwdSure.onblur = function () {
      let pwdVal = pwd.value; //上一个密码值
      let pwdSureVal = pwdSure.value; //这是确认密码值
      if (pwdSureVal === pwdVal) {
        alert("两次密码符合")
      } else {
        alert("两次密码输入不相同")
      }
    }
  </script>
</body>

</html>